<template>
    <div>
        <el-dialog title="区域详情" :visible.sync="dialogViewVisible" width="40%" :show-close="false"
            :close-on-click-modal="false" style="height: 100%;" custom-class="customclassdialog">
            <el-form :model="form" style="max-height: 20%;overflow-y: auto;"
                :style="'max-height:' + windowHeight / 2 + 'px;'">
                <el-row>
                    <el-col :span="12">
                        <el-row>
                            <el-col>
                                <el-form-item label="区域图片:" :label-width="formLabelWidth">
                            <el-image style="width: 100%;" :src="form.image_all" :preview-src-list="[form.image_all]">
                            </el-image>
                        </el-form-item>
                            </el-col>
                            <el-col >
                        <el-form-item label="设备数:" :label-width="formLabelWidth">
                            {{ form.equCount }}
                        </el-form-item>
                    </el-col>
                    <el-col >
                        <el-form-item label="正常数:" :label-width="formLabelWidth">
                            {{ form.equNormal }}
                        </el-form-item>
                    </el-col>
                    <el-col >
                        <el-form-item label="故障数:" :label-width="formLabelWidth">
                            {{ form.equQuestion }}
                        </el-form-item>
                    </el-col>
                    <!-- <el-col >
                        <el-form-item label="保护状态:" :label-width="formLabelWidth">
                            {{ form.powerstationprotect }}
                        </el-form-item>
                    </el-col> -->
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <el-col >
                        <el-form-item label="区域名称:" :label-width="formLabelWidth">
                            {{ form.name }}
                        </el-form-item>
                    </el-col>
                    <el-col >
                        <el-form-item label="所属电站:" :label-width="formLabelWidth">
                            {{ form.base_station.name }}
                        </el-form-item>
                    </el-col>
                    <el-col >
                        <el-form-item label="区域地址:" :label-width="formLabelWidth">
                            {{ form.address }}
                        </el-form-item>
                    </el-col>
                    <el-col >
                        <el-form-item label="电站地址:" :label-width="formLabelWidth">
                            <el-tag size="mini">{{ form.base_station.longitude }}</el-tag>
                            <el-tag size="mini" type="danger" style="margin-left: 5px;">{{ form.base_station.latitude
                                }}</el-tag>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="备注:" :label-width="formLabelWidth">
                            {{ form.des }}
                        </el-form-item>
                    </el-col>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'WorkspaceJsonViewcomponents',
    props: {
        optionVal: {
            type: Object
        },
        dialogViewVisible: {
            type: Boolean
        },
        powerstationoptions: {
            type: Array
        }
    },
    watch: {
        optionVal: {
            handler(ne, ol) {
                this.form = ne
            },
            deep: true,
            immediate: true
        }
    },
    data() {
        return {
            formLabelWidth: '100px',
            form: {},
            srcList: [],
            windowHeight: 0
        };
    },
    mounted() {
        this.windowHeight = document.body.clientHeight;
    },

    methods: {
        retfundata(data, iv) {
            let str = ''
            data.map(item => {
                if (item.id == iv) {
                    str = item.name
                }
            })
            return str
        },
        cancel() {
            this.$emit('viewHeld', false);
        }
    },
};
</script>

<style lang="scss" scoped>
// @keyframes fadeIn {
//     from { 
//         opacity: 0;
//         transform: translateY(-100%);
//     }
//     to { 
//         opacity: 1;
//         transform: translateY(0px);
//     }
// }
// ::v-deep .customclassdialog {
//     border-radius: 10px !important;
//     animation: fadeIn 1s ease-in-out forwards;
// }
</style>